import { Board, EventEnum, FactoryEnum, Gaia, ToolEnum } from '@fimagine/writeboard';
import '@fimagine/writeboard/dist/shape/pen';
import { useEffect, useRef } from "react";
import styles from "./index.module.css"
export default function WriteboardPage() {
  const _write_board_ele_ref = useRef<HTMLDivElement>(null);
  const _board_ref = useRef<Board | undefined>(void 0);
  useEffect(() => {
    const ele = _write_board_ele_ref.current;
    if (!ele) return;
    const factory = Gaia.factory(FactoryEnum.Default)()
    const board = _board_ref.current = factory.newWhiteBoard({ element: ele })
    board.toolType = ToolEnum.Pen;
    board.addEventListener(EventEnum.LayerAdded, ev => { })
    board.addEventListener(EventEnum.LayerRemoved, ev => { })
    const on_resize = () => {
      const { width, height } = ele.getBoundingClientRect()
      board.width = width;
      board.height = height;
    }
    on_resize()
    return () => {
      board.destory()
    }
  }, [])
  return (
    <div ref={_write_board_ele_ref} className={styles.write_board} />
  )
}